﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!--    引入jstl标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 设置项目上下文路径变量 -->
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${ctx }/plugin/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx }/css/b2c.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${ctx }/plugin/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${ctx }/plugin/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- 引用自定义脚本 -->
<script src="${ctx }/js/cart.js"></script>
<script src="${ctx }/js/user.js"></script>

</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="page-header">
					<h1>
						B2C网上商城 <small>Online Shopping Mall</small>
					</h1>
				</div>
				<div class="carousel slide" id="cs">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators" data-ride="carousel">
						<li data-slide-to="0" data-target="#cs" class="active"></li>
						<li data-slide-to="1" data-target="#cs"></li>
						<li data-slide-to="2" data-target="#cs"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner" role="listbox">
						<div class="item">
							<img alt="" src="${ctx }/img/1.jpg" />
							<div class="carousel-caption"></div>
						</div>
						<div class="item">
							<img alt="" src="${ctx }/img/2.jpg" />
							<div class="carousel-caption"></div>
						</div>
						<div class="item active">
							<img alt="" src="${ctx }/img/3.jpg" />
							<div class="carousel-caption"></div>
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="left carousel-control" href="#cs" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					</a> 
					<a class="right carousel-control" href="#cs" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					</a>
				</div>
				<hr />
				<ul class="nav nav-pills">
					<li class="active"><a href="${ctx }/welcome.jsp">首页</a></li>
					
					<li>
						<a href="${ctx }/cart/showCart.do">购物车						
								<c:set var="sum" value="0"></c:set>
								<c:forEach var="item" items="${cart.items }" varStatus="status">
								 		<c:set var="sum" value="${sum+item.value.amount}"></c:set>						    	
								</c:forEach>										
								<c:if test="${sum == 0 }">
									<span class="glyphicon glyphicon-shopping-cart" id="cart" style="color: rgb(255, 140, 60);"></span>
								</c:if>
								<c:if test="${sum > 0 }">
									<span class="glyphicon glyphicon-shopping-cart"  id="cart" style="color: rgb(255, 140, 60);">${sum}</span>
								</c:if>
						</a>
					</li>
					<c:if test="${user != null }">
					<li>
					<a href="${ctx }/user/showUserInfo.do?id=${user.id}" title="${user.name}">用户信息</a>
					</li>
					</c:if>
					<li class="pull-right">
						<ul class="nav navbar-nav navbar-right">
							<c:if test="${user == null }">
								<li><a href="${ctx}/web/register.jsp"><span
										class="glyphicon glyphicon-user"></span> 注册</a></li>
								<li><a href="${ctx }/web/login.jsp"><span
										class="glyphicon glyphicon-log-in"></span>登录</a></li>
							</c:if>
							<c:if test="${user != null }">
								<li>欢迎你，${user.name }
									<button type="button" class="btn btn-danger btn-sm"
										onclick="location='${ctx}/user/userLogout.do'">退出</button>
								</li>
							</c:if>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<hr />
		<div class="row clearfix">
			<div class="col-sm-3 col-md-4 col-lg-2">
				<div class="list-group">
					<a href="${ctx }/main/showIndex.do" class="list-group-item active">商品分类</a>
					<c:forEach items="${categorys}" var="category">
						<div class="list-group-item">
							<a href="${ctx }/main/showIndex.do?kw=${category.id}"
								title="${ category.description }">${ category.name } </a>
						</div>
					</c:forEach>
				</div>
			</div>
			<div class="col-sm-9 col-md-8 col-lg-10">
				<ul class="breadcrumb">
					<li><a href="#">最新商品</a></li>
				</ul>
				<div class="row">
					<c:forEach var="product" items="${page.datas}" varStatus="status">
						<div class="col-sm-6 col-md-5 col-lg-3">
							<div class="thumbnail">
								<img src="${ctx }/upload/${product.img}"
									style="width: 121px; height: 121px"
									class="img-rounded img-responsive float-left" alt="" />
								<div class="caption">
									<h4>${product.name }</h4>
									<p>${product.description }<span style="margin-left: 15px"></span>
										￥<span style="font-size: 1.5em; color: #111;"><b>${product.price }</b></span>
									</p>
									<p>
										<button type="button" class="btn btn-success  popover-show"
											title="" data-container="body" data-toggle="popover"
											data-content="成功加入到购物车 !"
											onclick="addCart(${product.id},this)">加入购物车</button>
										<a class="btn btn-link"
											href="${ctx }/product/showProductDetail.do?id=${product.id}">详细</a>
									</p>
								</div>
							</div>
						</div>
					</c:forEach>
				</div>
				<div class="center-block" style="width: 450px">
					<!-- 分页开始 -->
					<c:if test="${page.total >0 }">
						<script type="text/javascript">
								function gotoSelectedPage()
								{
									var x = document.getElementById("navigatorForm");
									x.submit();
								}
							</script>
						<form action="${ctx }/main/showIndex.do?kw=${kw}" method="post" id="navigatorForm"
							class="form-horizontal">							
								<ul class="pagination">
									<li><a href="${ctx }/main/showIndex.do?cp=1&kw=${kw}">首页</a></li>
									<c:if test="${page.currentPage >1 }">
										<li><a
											href="${ctx }/main/showIndex.do?cp=${page.currentPage-1}&kw=${kw}">上一页</a>
										</li>
									</c:if>
									<li>Go <select name="cp"
										style="width: 34px; height: 34px; text-align: middle; border-radius: 5px;"
										onchange="gotoSelectedPage();">
											<c:forEach begin="1" end="${page.total}" step="1"
												var="pageIndex">
												<c:choose>
													<c:when test="${pageIndex eq page.currentPage}">
														<option value="${pageIndex}" selected="selected">${pageIndex}</option>
													</c:when>
													<c:otherwise>
														<option value="${pageIndex}">${pageIndex}</option>
													</c:otherwise>
												</c:choose>
											</c:forEach>
									</select> 页
									</li>
									<c:if test="${page.currentPage < page.total}">
										<li><a
											href="${ctx }/main/showIndex.do?cp=${page.currentPage + 1}&kw=${kw}">下一页</a>
										</li>
									</c:if>
									<li><a href="${ctx }/main/showIndex.do?cp=${page.total}&kw=${kw}">末页</a></li>
								</ul>						
						</form>
					</c:if>
					<!-- 分页结束 -->
				</div>
			</div>
		</div>
	</div>
</body>
</html>